<template>
  <el-card class="i-c-box-card" shadow="hover">
    <el-row class="i-c-content">
      <el-col :span="18">
        <el-row class="i-c-title">{{ title }}（{{ unit }}）</el-row>
        <el-row class="i-c-value">
          <span class="currency" v-if="currency">$</span>
          <count-to
            :start-val="0"
            :end-val="value ? value : 0"
            :duration="2600"
            class="card-panel-num"
          />
        </el-row>
      </el-col>
      <el-col class="i-c-logo" :span="6">
        <img :src="icon" />
      </el-col>
    </el-row>
    <el-row class="i-c-footer">
      <slot name="footer">
        <span>{{tileL}} :<span class="i-c-f-value">{{ today }}</span></span>
        <span class="i-c-f-yesterday" v-if="yesterday != null">
        <span class="i-c-f-divider"> | </span>
        {{ titleR }}：<span class="i-c-f-value">{{ yesterday }}</span></span>
      </slot>
    </el-row>
  </el-card>
</template>
<script>
import CountTo from "vue-count-to";

export default {
  name: "IndexCard",
  components: { CountTo },
  props: {
    title: String,
    unit: String,
    value: [String, Number],
    today: [String, Number],
    yesterday: [String, Number],
    tileL:[String],
    titleR: [String],
    todayLabel: String,
    icon: String,
    currency: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.i-c-content {
  height: 100px;

  .i-c-title {
    font-size: 14px;
  }

  .i-c-value {
    color: #515a6e;
    font-size: 30px;
    padding-top: 13px;
  }

  .i-c-logo {
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 70px;
      height: 70px;
    }
  }
}

.currency {
  font-size: 22px;
}

.i-c-footer {
  font-size: 14px;
  color: #cccccc;

  .i-c-f-divider {
    padding: 0 16px;
  }

  .i-c-f-value {
    color: black;
  }
}
</style>
